<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哲学思想</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: url('images/phy.jpg') no-repeat center center fixed; /* 设置背景图片 */
            background-size: cover;
            overflow-x: hidden; /* 防止页面水平滚动 */
        }

        header {
            background-color: #8B0000;
            color: white;
            padding: 5px 0;
            text-align: center;
            font-size: 1.2em;
        }

        /* 导航栏样式 */
        nav ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
            margin: 0; /* 移除默认外边距 */
        }

        nav ul li {
            display: inline-block;
            margin: 0 20px; /* 左右外边距为20px */
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold; /* 粗体 */
            position: relative;
            transition: color 0.3s ease, transform 0.3s ease; /* 文字颜色和缩放效果的过渡 */
        }

        /* 动态效果：鼠标悬停时 */
        nav ul li a:hover {
            color: #FFD700; /* 鼠标悬停时改变文字颜色 */
            transform: scale(1.1); /* 鼠标悬停时放大 */
        }

        /* 动态效果：点击时 */
        nav ul li a:active {
            color: #FF4500; /* 点击时改变文字颜色 */
            transform: scale(0.9); /* 点击时缩小 */
        }

        /* 添加下划线效果 */
        nav ul li a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px; /* 在文字下方 */
            width: 100%;
            height: 2px;
            background-color: #FFD700; /* 下划线颜色 */
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        nav ul li a:hover::after {
            transform: scaleX(1);
            transform-origin: left; /* 下划线从左向右展开 */
        }

        main {
            padding: 20px;
        }

        /* 交错布局样式 */
        .section {
            display: flex;
            margin: 40px auto; /* 中心对齐并上下有间距 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
            max-width: 900px; /* 限制卡片最大宽度 */
            opacity: 0; /* 初始时透明 */
            transform: translateY(50px); /* 初始时稍微向下偏移 */
            transition: opacity 1s ease, transform 1s ease;
        }

        .section:hover {
            background-color: #8B0000;
            transform: scale(1.1);
        }

        .section:nth-child(even) {
            flex-direction: row-reverse;
            
        }

        .section img {
            width: 40%;
            height: auto;
            margin: 0 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 1s ease;
        }

        .section img:hover {
            transform: scale(1.1);
        }

        .section .content {
            width: 60%;
        }

        .section .content h3 {
            margin-top: 0;
            font-size: 24px;
            color: white;
            text-align: center;
            background-color: #8B0000;
            color: white;
            padding: 5px;
            border-radius: 5px;
        }

        .section .content p {
            text-align: justify;
            font-size: 20px;
            color: #666;
            background-color: rgba(255, 255, 255, 0.8); /* 文字块的背景色 */
            border-radius: 6px;
        }

        footer {
            text-align: center;
            padding: 1px;
            background-color: #8B0000;
            color: white;
            width: 100%;
            bottom: 0;
        }

        /* 动态效果 */
        .section {
            opacity: 0;
            transform: translateY(45px);
            transition: opacity 2.5s ease, transform 1s ease;
        }

        .section.visible {
            opacity: 1;
        }
    </style>
</head>
<body>
    <header>
        <h1>中国传统文化推广 - 哲学思想</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="history.html">历史与传说</a></li>
                <li><a href="philosophy.html">哲学思想</a></li>
                <li><a href="arts.html">文学艺术</a></li>
                <li><a href="festivals.html">传统节日</a></li>
                <li><a href="customs.html">民俗风情</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- 板块：儒家思想 -->
        <div class="section">
            <img src="images/rujia.jpg" alt="儒家思想">
            <div class="content">
                <h3>儒家思想</h3>
                <p>儒学具有开放包容的特性，儒学具有经世致用的特性，周公及三代礼乐，乃后起儒学之先导，周礼制定之地洛邑成周，乃中国儒学之祖庭。几千年来，为历代儒客尊崇。儒家思想也称为儒教或儒学，由孔子创立，后来以此为基础逐渐形成完整的儒家思想体系，影响深远。</p>
            </div>
        </div>

        <!-- 板块：道家思想 -->
        <div class="section">
            <img src="images/daojia.jpg" alt="道家思想">
            <div class="content">
                <h3>道家思想</h3>
                <p>道家思想，是古代一种思想流派。有辩证法因素和无神论的倾向，反对争斗。最早追溯到春秋战国时期，道家用“道”来探究自然、社会、人生之间的关系。道家提倡道法自然、无为而治、与自然和谐相处。</p>
            </div>
        </div>

        <!-- 板块：法家思想 -->
        <div class="section">
            <img src="images/fajia.jpg" alt="法家思想">
            <div class="content">
                <h3>法家思想</h3>
                <p>法家是中国历史上研究国家治理方式的学派，提出了富国强兵、以法治国的思想。它是诸子百家中的一家，战国时期提倡以法制为核心思想的重要学派。</p>
            </div>
        </div>

        <!-- 板块：墨家思想 -->
        <div class="section">
            <img src="images/mojia.jpg" alt="墨家思想">
            <div class="content">
                <h3>墨家思想</h3>
                <p>墨家思想以墨子为代表，提倡兼爱和非攻。墨家十大主张是：尚贤，尚同，兼爱，非攻，节用，节葬，天志，明鬼，非乐，非命。即与人之间平等的相爱（兼爱），交相利，反对战争（非攻），推崇节约、反对铺张浪费</p>
            </div>
        </div>

        <!-- 板块：兵家思想 -->
        <div class="section">
            <img src="images/bingjia.jpg" alt="兵家思想">
            <div class="content">
                <h3>兵家思想</h3>
                <p>兵家思想以孙子和孙膑为代表，主要研究战争的策略和谋略。兵家强调灵活应变和战略的巧妙运用，以最小的代价取得最大的胜利。</p>
            </div>
        </div>
    </main>
    <footer>
        <p>&copy; 2024 202006402111李采珍</p>
    </footer>
    <script>
        // 文字和图片滑入效果
        const sections = document.querySelectorAll(".section");

        const revealSections = () => {
            sections.forEach(section => {
                const rect = section.getBoundingClientRect();
                if (rect.top < window.innerHeight && rect.bottom >= 0) {
                    section.classList.add("visible");
                }
            });
        };

        window.addEventListener("scroll", revealSections);
        window.addEventListener("load", revealSections);
    </script>
</body>
</html>
